/* eslint-disable react/prop-types */
import { AgGridReact } from "ag-grid-react" // React Data Grid Component
import { Pagination } from "antd"
import "ag-grid-community/styles/ag-grid.css" // Mandatory CSS required by the Data Grid
import "ag-grid-community/styles/ag-theme-quartz.css" // Optional Theme applied to the Data Grid
import "./table-overwrite.less"
import style from "./index.module.less"
import { moduleClassSetter } from "@/common"

const classSelector = moduleClassSetter(style)

const headerConfig = {
  headerHeight: 35,
}
const styleObj = {
  flex: 1,
}

export default function CommonTable(props) {
  const {
    data,
    columns,
    headerComponent,
    pageInfo,
    onPageChange,
    disablePageNav = false,
  } = props
  console.log("common-table run")

  return (
    <div className={classSelector("common-table-page")}>
      {/* 插槽 按钮和搜索 */}
      <div className={classSelector("common-table-action")}>
        {headerComponent}
      </div>

      {/* 数据展示 */}
      <div className="ag-theme-quartz lucky-table-wrapper" style={styleObj}>
        <AgGridReact
          {...headerConfig}
          rowData={data}
          columnDefs={columns}
        ></AgGridReact>
      </div>

      {/* 翻页按钮 */}
      {!disablePageNav && (
        <div className={classSelector("common-table-pagenation")}>
          <Pagination
            align="end"
            showSizeChanger
            onChange={onPageChange}
            defaultCurrent={pageInfo.pageNum}
            total={pageInfo.total}
          />
        </div>
      )}
    </div>
  )
}
